<!--
 * @description  : 报表-五万元以上案件量
 * @descriptionDetail : 报表-五万元以上案件量
 * @author       : bln
 * @create       : 2024-10-08 00:00:00
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" title="五万元以上案件详情" :custom-back="goBack" style="z-index: 99999" />
    <!-- #endif -->
    <view class="static">
      <span class="text">{{baseInfo.title}}</span>
      <span><span class="num u-p-r-10">{{baseInfo.totalValue}}</span><span class="unit">{{baseInfo.unit}}</span></span>
    </view>
    <view class="org">
      <u-tag :class="['u-m-r-16 u-m-b-20', item.checked ? 'it_check' : '']" v-for="item,index in orgs" :key="item.orgUuid" :text="item.orgName" @click="handleOrg(index)" />
    </view>
    <u-table font-size="30" style="border-left: none;">
      <u-tr class="u-tr border-left">
        <u-th width="20%">单位</u-th>
        <u-th width="40%">类型</u-th>
        <u-th width="20%">数量</u-th>
        <u-th width="20%">同比</u-th>
      </u-tr>
      <u-tr class="u-tr border-left">
        <u-td width="20%" class="f_td">
          <view>{{ checkedData.orgName }}</view>
        </u-td>
        <u-td width="40%" class="o_td">
          <u-td v-for="(item, index) in checkedData.commonDetailList" :key="index+'type'">{{ item.detailtype }}</u-td>
        </u-td>
        <u-td width="20%" class="o_td">
          <u-td v-for="(item, index) in checkedData.commonDetailList" :key="index+'num'">{{ item.totalValue }}</u-td>
        </u-td>
        <u-td width="20%" class="o_td">
          <u-td v-for="(item, index) in checkedData.commonDetailList" :key="index+'rate'">{{ item.totalValueTB }}%</u-td>
        </u-td>
      </u-tr>
  </u-table>
  </view>
</template>
<script>
import queryService from '@/service/query/query.service.js'

export default {
  data () {
    return {
      orgs: [],
      param: {},
      baseInfo: {},
      dataSource: [],
      checkedData: []
    }
  },
  onLoad () {
    this.param = this.getRouteParam()
    this.loadData()
  },
  methods: {
    // 列表数据初始化
    loadData() {
      this.$u.loading('加载中...')
      return queryService.report.getMobileHReportDatas({
        isMobileGroup: 1,
        reportCode: this.param.reportCode,
        reportParas: {
          startDate: this.param.startDate, 
          endDate: this.param.endDate,
          orgLevel: this.$store.state.userInfo.orgLevel
        }
      }).then(dr => {
        const { data = [], success } = dr
        if (success) {
          this.baseInfo = data.find(item => item.commonDetailList[0].type === 0).commonDetailList[0] || {}
          this.dataSource = data.filter(item => item.commonDetailList[0].type === 1 && item.orgName)
          this.checkedData = this.dataSource[0]
          this.orgs = this.dataSource.map((item,index) => {
            return {
              checked: index === 0,
              orgUuid: item.commonDetailList[0].orgUuid,
              orgName: item.commonDetailList[0].orgName
            }
          })
        }
        this.$u.hideLoading()
      }).catch(er => {
        this.$u.toast(er)
        this.$u.hideLoading()
      })
    },
    // 点击组织机构查询
    handleOrg(index) {
      this.orgs.map((item, key) => item['checked'] = key === index)
      this.checkedData = this.dataSource[index]
      this.$forceUpdate()
    }
  }
}
</script>
<style lang="scss" scoped>
.static {
  width: 100%;
  height:160rpx;
  color: #fff;
  display: flex;
  padding: 30rpx 40rpx;
  margin-bottom: 20rpx;
  align-items: center;
  border-radius: 10rpx;
  justify-content: space-between;
  background-color: #327be7;
  .text {
    font-size: 36rpx;
  }
  .num {
    font-size: 50rpx;
    font-weight: 700;
  }
  .unit {
    font-size: 30rpx;
  }
}
.u-tag {
  color: #000;
  font-size: 26rpx!important;
  padding: 20rpx 40rpx!important;
}
.it_check {
  color: #fff;
  background-color: #327be7;
}
.border-left {
  border-left: 1px solid rgb(228, 231, 237);
}
.u-tr {
  line-height: 55rpx;
  .f_td {
    width: 20%;
    text-align: center;
    writing-mode: vertical-rl;
    background-color: #f6fbff;
  }
  .o_td {
    border-bottom: none!important;
    padding: 0rpx!important;
    &:nth-child(3), &:nth-child(4) {
      .u-td {
        font-weight: 700;
        color: #2770e7!important;
      }
    }
  }
  .u-td {
    height: auto!important;
  }
  .u-th {
    background-color: #f6fbff;
  }
  .u-td .u-td{
    border-right: none!important;
  }
}
</style>